<template>
	<view class="page">
		<view class="top">
			<uni-card :title="courseTime.courseName" :thumbnail="avatar">
				<view>班级：{{courseTime.claName}}</view>
				<view>日期：{{courseTime.claDate}} {{courseTime.weekDay}}</view>
				<view>时间：{{courseTime.startTime}} - {{courseTime.endTime}}</view>
				<view>教师：{{courseTime.staffName}}</view>
				<view>地点：{{courseTime.roomName}}</view>
			</uni-card>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="QR">
			<uni-card class="middle">
				<view class="middleStatus" style="background-color: #f56c6c;" v-if="status ==1">待上课</view>
				<view class="middleStatus" style="background-color: #5384e2;" v-else-if="status ==2">已上课</view>
				<view class="middleBox" v-if="false">
					<view v-if="showQrcode || status == 2">
						<view id="qrcode" v-html="qrCodeData"></view>
					</view>
					<view v-else class="signBut">
						<view @click="openClassAsk">点击开课</view>
					</view>
				</view>
				<view class='scan' v-else>
					<view class="signBut" v-if="status == 1" style="background-color:#a5a5a5;">
						<view>签到</view>
						<view>{{ time }}</view>
					</view>
					<view class="signBut" @click="scan" v-else-if="status == 2 && !stuStatus">
						<view>签到</view>
						<view>{{ time }}</view>
					</view>
					<view class="signBut" v-else style="background-color:#18bc37;">
						<view>已签到</view>
					</view>
				</view>
			</uni-card>
		</view>
		<uni-card class=''>
			<view class="bottom">
				<view class="bottomTitle">
					<view class="bottomTitleLeft">
						签到记录
					</view>
					<view class="bottomTitleRight" v-if="courseTime.status == 2">
						<view style="margin-right: 10px;">请假人数:{{classRecord.leaveCnt}}</view>
						<view>应到人数:{{classRecord.needAttendCnt}}</view>
					</view>
				</view>
				<view class="bottomRecordNo" v-if="courseTime.status == 1">
					<view style="margin-left: 20px;">未开课</view>
				</view>
			
				<view class="bottomRecordList" v-else-if="courseTime.status == 2">
					<view style="display: flex;flex-direction: row;flex-wrap: wrap; width: 100%;">
						<view v-for="(item,index) in studentRecordList" :key="index">
							<view class="bottomRecordItem" v-if="item.status==1">
								<!-- <view class="bottomRecordItem"> -->
								<view class="avart"></view>
								<view style="font-size: 16px;">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-card>
		<!-- #endif -->
	</view>
</template>

<script>
	import QRCode from "qrcode"
	import { getCourseInfoByIdApi, updateStuRecordApi, newClaRecordApi, getStuRecordApi, getStuRecordOneApi } from '@/common/api/course'
	export default {
		data() {
			return {
				weekDay: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
				courseTime: {
					courseTimeId: null,
					claId: null,
					courseId: null,
					teacherId: null,
					roomId: null,
					claDate: null,
					startTime: null,
					endTime: null,
				},
				avatar: '../../static/avart.jpg',
				time: null,
				status: 1,
				stuStatus: 0,
				showQrcode: false,
				qrCodeData: '',
				userId: null,
			}
		},
		components: {
		},
		computed: {
		},
		onLoad(option) {
			console.log(option, 'option')
			this.courseTime = JSON.parse(option.item)
			getCourseInfoByIdApi(this.courseTime.courseTimeId).then(res => {
				console.log(res, ',,,,')
				this.status = res.data.status
				if(this.status == 2) {
					this.toShowQrCode()
					this.getRecordList()
					this.getOwnStatus()
				}
			})
			
			if (this.timer) {
				clearInterval(this.timer)
			}
			this.timer = setInterval(() => {
				this.updateTime() // 使用箭头函数保证this正确
			}, 1000)
			
			const userString = uni.getStorageSync('info')			
			// 将字符串解析为对象
			const user = userString ? JSON.parse(userString) : null;
			this.userId = user.userId
			
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		methods: {
			updateTime() {
				const now =new Date(new Date().getTime()-2000);
				const hours = now.getHours().toString().padStart(2, '0'); // 获取小时并补充0
				const minutes = now.getMinutes().toString().padStart(2, '0'); // 获取分钟并补充0
				const seconds = now.getSeconds().toString().padStart(2, '0'); // 获取秒并补充0
				this.time = `${hours}:${minutes}:${seconds}`; // 设置显示的时间
			},
			scan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log("二维码识别结果：", res.result)
						this.handleQRCodeContent(res.result)
					},
					fail: (err) => {
						console.log("二维码扫描失败", err)
					}
				})
			},
			handleQRCodeContent(code) {
				updateStuRecordApi({
					courseTimeId: code,
					userId: this.userId
				}).then((res) => {
					console.log('scanRes', res)					
				})
			},
			openClassAsk() {
				uni.showModal({
					title: '提示',
					content: '是否开始上课签到',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定')
							this.openClass()
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			openClass() {
				newClaRecordApi({
					courseTimeId: this.courseTime.courseTimeId
				}).then(addRes => {
					if(addRes.data.data == 'success') {
						// 调出二维码
						this.toShowQrCode()
					}
				})
			},
			toShowQrCode(code) {
				this.qrCodeData = ''
				// 使用 qrcode 库生成二维码
				QRCode.toDataURL(this.courseTime.courseTimeId)
					.then(url => {
					  this.qrCodeData = `<img src="${url}" alt="二维码" style="width: 200px;" />`
						console.log(this.qrCodeData, 'this.qrCodeData')
					})
					.catch(err => {
					  console.error('生成二维码失败：', err)
					})
			},
			getOwnStatus() {
				getStuRecordOneApi({
					courseTimeId: this.courseTime.courseTimeId,
					userId: this.userId
				}).then((stuRes) => {
					console.log('stuOwn', stuRes)
					// this.stuStatus = stuRes
				})
			},
			getRecordList() {
				getStuRecordApi({
					courseTimeId: this.courseTime.courseTimeId
				}).then((stuRes) => {
					console.log('stuList', stuRes)
					this.studentRecord = stuRes.data.rows[0]
				})
			},
		}
	}
</script>


<style>
	.middle {
		height: 200px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		/* 设置容器的相对定位 */
		overflow: hidden;
	}
	
	.middleStatus {
		position: absolute;
		top: 45px;
		left: 0;
		transform: rotate(-45deg);
		transform-origin: bottom left;
		font-size: 14px;
		color: #fff;
		width: 90px;
		text-align: center;
	}
	.signBut {
		width: 30vw;
		height: 30vw;
		background-color: #2ca0e8;
		color: #fff;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		font-weight: bold;
	}
	
</style>